<template>
    <div id="appactive">
      <header>
        <h4>活动</h4>
      </header>
      <!-- 当前活动 -->
      <ul class="act-wrap" >
        <li class="act-item" v-for="(item,index) in runActiveList" v-bind:key="index">
          <div @click="GoDetails(item)" class="act-box">
            <img v-lazy="item.url" class="lazyload-image">
            <count-down :item="item"></count-down>
          </div>
        </li>
      </ul>

      <!-- 过期活动 -->
      <div v-if="oldActiveList.length" class="active-past" >
        <h4>过往活动</h4>
        <ul class="act-wrap past-wrap">
          <li class="act-item act-item-old" v-for="(item,index) in oldActiveList" v-bind:key="index" >
              <div @click="GoDetails(item)" class="act-box">
                <img v-lazy="item.url" class="lazyload-image">
                <span class="a-state a-state-end">已结束</span>
                <div class="a-mask"></div>
              </div>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
import countDown from "components/countdown.vue";
export default {
  name: "appactive",
  data() {
    return {
      runActiveList: [],
      oldActiveList: [],
    };
  },
  components: {
    countDown
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //获取活动列表
      var self = this;

      // 定义请求
      var req = this.Axios.get(this.Interface.getAdList, {
        params: { adspaceId: 14 }
      });

      // 处理请求
      req.then(res => {
        var data = res.data;
        // console.log(data);
        if (data.success) {
          // 在这里把数据处理掉
          const actData = data.data.list;
          const runData = [];
          const oldData = [];
          const curTime = new Date().getTime();
          actData.forEach(item => {
            item.curTime = curTime;
            if (curTime >= item.endTimeMillis) {
              oldData.push(item);
            } else {
              runData.push(item);
            }
          });

          self.runActiveList = runData;
          self.oldActiveList = oldData;
        }
      });
    },
    // 查看活动详情
    GoDetails(url) {
      APP.Jump(url);
    }
  }
};
</script>
<style lang="less" scoped>
header{
  padding: 10px 40px 11px;
  h4{
    color:#333;
    font-size: 54px;
  }
}
.act-item {
  position: relative;
  padding: 35px 40px 0;
  text-align: center;

  img {
    border-radius: 6px;
  }
  .a-state {
    position: absolute;
    right: 39px;
    top: 39px;
    color: #fff;
    border-radius: 6px;
    padding: 5px 16px;
    z-index: 9;
    font-size: 24px;
    &.a-state-end {
      background: #5788e9;
    }
    &.a-state-comming {
      background: #f2616d;
    }
  }

  &.act-item-old {
    .a-mask {
      background: rgba(255, 255, 255, 0.6);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 8;
    }
  }

  &:last-child {
    padding-bottom: 26px;
  }
}

.active-past {
  h4 {
    font-size: 28px;
    color: #666;
    text-align: center;
  }
}
</style>
